<template>
	<view class="payment-container">
		<view class="stepBox">
			<uni-steps :options="list" :active="active" />
		</view>
		<view class="payment-container-box">
			<view class="icon-payment-container">
				<view class="icons-checkmarkempty">
					<uni-icons type="checkmarkempty" size="24" color="white"></uni-icons>
				</view>
				<view class="">你的订单已提交！</view>
			</view>
			<view style='display: flex;flex-direction: row;justify-content: space-between;'>
				<text style="margin-right: 20rpx;color: #7e7b7b;">订单号</text>
				<text class="totalPay"> {{formData.orderNo}}</text>
			</view>
			<view style='display: flex;flex-direction: row;justify-content: space-between;'>
				<text style="margin-right: 20rpx;color: #7e7b7b;">订单总金额</text>
				<text class="totalPay">￥{{totalPrice}}</text>
			</view>
		</view>
		<view class="paytype-choose-box">
			<view class="chooseTitle">
				<text class="chooseTitle_box">选择支付方式 </text>
			</view>
			<view class="payTypeBox">
				<view class="payment-weiChat">
					<view class="payTypeImage">
						<image src="../../static/alpay.png" class="produce_image"></image>
						<view class="patTypeTitle">
							<view>支付宝支付</view>
							<view>快捷更便利，亿万用户的选择</view>
						</view>
					</view>
					<radio :checked="payType ===0" @tap="toggleRadio(0 )"></radio>
				</view>
				<view class="payment-weiChat">
					<view class="payTypeImage">
						<image src="../../static/wechat.png" class="produce_imageTwo"></image>
						<view class="patTypeTitle">
							<view> 微信支付</view>
							<view>快捷更便利，亿万用户的选择</view>
						</view>
					</view>
					<radio :checked=" payType===1" @tap="toggleRadio(1 )"> </radio>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request'
	export default {
		data() {
			return {
				active: 2,
				list: [{
					title: '我的订单',
					state: 'finish'
				}, {
					title: '确认订单信息',
					state: 'finish'
				}, {
					title: '选择支付方式 '
				}, {
					title: '查看订单信息 '
				}],
				totalPrice: '',
				formData: {
					payScene: '1',
				},
				payType: null,
				countdown: 3,
			};
		},
		onLoad(options) {
			this.formData.orderNo = JSON.parse(options.orderInfo).orderNo
			if (JSON.parse(options.orderInfo).totalPrice) {
				// 从我的订单页面跳转过来的
				this.totalPrice = JSON.parse(options.orderInfo).totalPrice
			} else {
				// 从商品订单跳转过来的，没有totalPrice字段
				this.totalPrice = JSON.parse(options.orderInfo).goodsCount * JSON.parse(options.orderInfo).money
			}

		},
		methods: {
			payMent(order) {
				uni.showModal({
					title: '确定要支付？',
					duration: 2000,
					success: function() {
						request.post('/web/pay/apply',
							order
						).then(res => {
							if (res.code === 0) {
								var form1 = document.createElement("form")
								form1.id = "form1";
								form1.name = "form1";
								document.body.appendChild(form1);
								// 创建一个输入
								var input = document.createElement("input");
								//设置相应参数
								input.type = "text";
								input.name = "appCode";
								input.value = res.data.appCode;

								var txtOrig = document.createElement("input");
								//设置相应参数
								txtOrig.type = "text";
								txtOrig.name = "orig";
								txtOrig.value = res.data.orig;

								var txtSign = document.createElement("input");
								//设置相应参数
								txtSign.type = "text";
								txtSign.name = "sign";
								txtSign.value = res.data.sign;

								var txtnotify_url = document.createElement("input");

								//将该输入框插入到 form 中
								form1.appendChild(input);
								form1.appendChild(txtOrig);
								form1.appendChild(txtSign);

								// form 的提交方式
								form1.method = "POST";
								//form 提交路径
								form1.action = res.data.payUrl;

								//对该 form 执行提交
								form1.submit();
							} else {
								uni.$showMsg(res.msg)
							}
						});
					},
					fail: function(err) {
						console.error('toast 显示失败:', err);
					}
				});
			},

			toggleRadio(type) {
				this.payType = this.payType === type ? null : type;
				this.formData.payType = this.payType
				this.payMent(this.formData)
			},
			change() {
				if (this.active < this.list.length - 1) {
					this.active += 1
				} else {
					this.active = 0
				}
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .uni-radio-input.uni-radio-input-checked {
		/* 将背景颜色改为红色 */
		background-color: #ff5555 !important;
		/* 如果需要，也可以调整边框颜色为红色 */
		border-color: #ff5555 !important;
		/* 确保文字颜色与背景形成对比，可选 */
		color: #ffffff !important;
	}

	/* 假设已完成的步骤使用了某种类名，如.active-precedent，你需要根据实际的类名或结构进行调整 */
	/deep/ uni-radio .uni-radio-input {
		border-radius: 0rpx !important;
	}

	.payment-container {
		background-color: #eee;
		font-size: 30rpx;

		.stepBox {
			height: 100rpx;
			background-color: white;
			border-top: 1rpx solid #eee;
			display: flex;
			align-items: center;
		}

		.payment-container-box {
			border-top: 1rpx solid #eee;
			background-color: white;
			padding: 20rpx;

			.icon-payment-container {
				display: flex;
				color: #ff5555;
				// justify-content: space-between;
				align-items: center;
				margin: 10rpx 0rpx;

				.icons-checkmarkempty {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					background-color: #ff5555;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 10rpx;
				}
			}

			.totalPay {
				color: #ff5555;
			}
		}

		.paytype-choose-box {
			margin-top: 20rpx;
			background-color: white;
			padding: 0 20rpx;

			.chooseTitle {
				border-bottom: 1rpx solid white;

				.chooseTitle_box {
					margin: 10rpx;
					font-weight: bold;
					border-bottom: 1rpx solid deepskyblue;
				}
			}

			.payTypeBox {
				display: flex;
				flex-direction: column;

				.payment-weiChat {
					border-bottom: 1rpx solid #eee;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.payTypeImage {
						margin-top: 10rpx;
						display: flex;

						.produce_image {
							height: 70rpx;
							width: 70rpx;
							margin: 5rpx;
						}

						.produce_imageTwo {
							height: 60rpx;
							width: 60rpx;
							margin: 10rpx;
						}

						.patTypeTitle {
							color: #7e7b7b;
							font-size: 26rpx;
						}
					}

					// border: 1rpx solid #eee;



				}


			}

		}
	}
</style>